.header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 120rpx;
	overflow: hidden;
	position: relative;
	.title {
		font-size: 44rpx;
	}
	.badge {
		background: $danger;
		color: #fff;
		font-size: 24rpx;
		margin-left: 20rpx;
		padding: 6rpx 20rpx;
		border-radius: 30rpx 30rpx 30rpx 0;
	}
	.search {
		width: 35rpx;
		height: 35rpx;
		display: block;
		position: relative;
		z-index: 2;
		margin-left: auto;
	}
	// &::after {
	// 	content: "";
	// 	position: absolute;
	// 	width: 800rpx;
	// 	height: 180rpx;
	// 	z-index: 1;
	// 	border-radius: 1000px;
	// 	border: 1px dashed #e2e2e2;
	// 	bottom: -90rpx;
	// 	right: -400rpx;
	// }
}

.banner {
	.dot {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.item {
			width: 20rpx;
			height: 14rpx;
			border-radius: 8rpx;
			background: rgba($primary, 0.55);
			margin: 0 5rpx;
			transition: all 0.25s;
			&.active {
				background: $primary;
				width: 30rpx;
			}
		}
	}
}

.article-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 42rpx;
	height: 100rpx;
	.more {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #919191;
		font-size: 24rpx;
		position: relative;
		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
		&.arrow-right {
			padding-right: 20rpx;
			&::after {
				width: 10rpx;
				height: 10rpx;
			}
		}
	}
}

.article-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	.item {
		width: 330rpx;
		flex: none;
		margin-bottom: 35rpx;
	}
	.image-wrap {
		position: relative;
		overflow: hidden;
		border-radius: 15rpx;
		height: 240rpx;
		.image {
			width: 100%;
			height: 100%;
			display: block;
		}
		.tip {
			color: #fff;
			width: 70rpx;
			height: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			font-size: 24rpx;
			border-radius: 0 0 15rpx 0;
			&.new {
				background: $color;
			}
			&.hot {
				background: $danger;
			}
		}
	}
	.title {
		height: 64rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.message {
		line-height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		color: #adadad;
		padding: 0 10rpx;
		background: #f7f7f7;
		border-radius: 10rpx;
		width: min-content;
	}
}
